<script setup lang="ts">
import type { Standard } from '@/types/StandardType'
import { api, api_url } from '@/api/api'
import { ref, onBeforeMount } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStandardstore } from '@/stores/standard'
import { useParameterstore } from '@/stores/parameter'
import { ElLoading, ElMessageBox } from 'element-plus'
import { useProjectStatusStore } from '@/stores/AStoreJustStoreProjectStatus'

const router = useRouter()
const route = useRoute()
const standardstore = useStandardstore()
const parameterstore = useParameterstore()
const projectStatusStore = useProjectStatusStore()

function goBack() {
  router.push('/home/confirmingQ')
}
const handleOpen = () => {
  router.push('/home/infoQ/' + parseInt(route.params.id.toString()) + '/' + 'st')
}
const handleClose = () => {
  router.push('/home/infoQ/' + parseInt(route.params.id.toString()) + '/' + 'st')
}
const allStandard = ref<Standard[]>([])
const status = ref('')
const projectId = ref(-1)

onBeforeMount(() => {
  let loading = ElLoading.service()
  api.getProjectById(parseInt(route.params.id.toString())).then((resp) => {
    allStandard.value = resp.standards
    status.value = resp.status
    projectId.value = resp.id
    projectStatusStore.status = resp.status
    projectStatusStore.id = resp.id
    loading.close()
  })
})
function jump(m: any, n: any) {
  let s: any = {}
  standardstore.standard =
    allStandard.value.find((x) => {
      return x.id == m
    }) ?? s
  parameterstore.parameter =
    standardstore.standard?.parameterList.find((x) => {
      return x.id == n
    }) ?? s
}

function confirm(x: number) {
  let loading = ElLoading.service()
  api.confirm(x).then(() => {
    loading.close()
    ElMessageBox.alert('已验收！', '成功', {
      confirmButtonText: '确认'
    }).then(() => {
      router.go(0)
    })
  })
}

function sendBack(x: number) {
  let loading = ElLoading.service()
  api.sendBackToCompleted(x).then(() => {
    loading.close()
    ElMessageBox.alert('已退回！', '成功', {
      confirmButtonText: '确认'
    }).then(() => {
      router.push('/home/confirmingQ')
    })
  })
}
function toAgreed(x: number) {
  let loading = ElLoading.service()
  api.agreed(x).then(() => {
    loading.close()
    ElMessageBox.alert('已将该项目标记为已认可！', '成功', {
      confirmButtonText: '确认'
    }).then(() => {
      router.push('/home/confirmedQ')
    })
  })
}

function downloadExcel(x: number) {
  let loading = ElLoading.service()
  api
    .getExcel(x)
    .then((resp) => {
      let count = 0
      resp.forEach((excel) => {
        window.open(api_url + 'excels/' + excel, count.toString())
        count++
      })
      loading.close()
    })
    .catch(() => {
      loading.close()
      ElMessageBox.alert('获取表格出错！', '错误', {
        confirmButtonText: '确认'
      })
    })
}
</script>

<template>
  <div class="info_main">
    <el-container>
      <el-header>
        <div class="sub">
          <el-page-header @back="goBack()">
            <template #content>
              <span class="text-large font-600 mr-3"> 项目详情 </span>
            </template>
          </el-page-header>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px" class="aside">
          <div class="cs">
            <el-row class="tac">
              <el-col :span="24">
                <el-menu
                  default-active="1"
                  class="el-menu-vertical-demo"
                  @open="handleOpen"
                  @close="handleClose"
                  :router="true"
                >
                  <el-sub-menu v-for="item in allStandard" :index="item.id" :key="item.id">
                    <template #title>
                      <span>{{ item.name }}</span>
                    </template>
                    <el-menu-item
                      v-for="i in item.parameterList"
                      :index="'/home/infoQ/' + parseInt(route.params.id.toString()) + '/' + i.id"
                      @click="jump(item.id, i.id)"
                      :key="i.id"
                    >
                      <template #title>
                        <span>{{ i.name }}</span>
                      </template>
                    </el-menu-item>
                  </el-sub-menu>
                </el-menu>
              </el-col>
            </el-row>
          </div>
          <div class="textbox">
            <div class="text">
              <h4>参数列表</h4>
            </div>
          </div>
        </el-aside>
        <el-main>
          <div class="submainbox">
            <RouterView />
          </div>
        </el-main>
      </el-container>
    </el-container>
    <div v-if="status == 'Confirming'">
      <el-button type="primary" @click="confirm(projectId)">验收</el-button>
      <el-button type="primary" @click="sendBack(projectId)">退回</el-button>
    </div>
    <div v-if="status == 'Confirmed'">
      <el-button type="primary" @click="downloadExcel(projectId)">下载表格</el-button>
      <el-button type="primary" @click="toAgreed(projectId)">标记该项目为已认可</el-button>
    </div>
    <div v-if="status == 'Agreed'">
      <el-button type="primary" @click="downloadExcel(projectId)">下载表格</el-button>
    </div>
  </div>
</template>

<style scoped>
.info_main {
  width: 80%;
  height: 670px;
  border-width: 5px;
  margin-top: 30px;
  margin-left: 50px;
  margin-bottom: 100px;
  box-shadow: 0px 0px 8px 1px lightgray;
  padding-top: 10px;
  padding-bottom: 740px;
  transition: 1s;
}

.sub {
  border-style: inset;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  padding-bottom: 10px;
}

.aside {
  position: relative;
  height: 600px;
  margin-top: -10px;
  margin-left: 10px;
  margin-bottom: 10px;
  margin-right: 10px;
  border-style: groove;
  border-top: 0;
  border-left: 0;
  border-bottom: 0;
}

.cs {
  width: 100%;
}

.tac {
  width: 100%;
}

.textbox {
  position: absolute;
  width: 100%;
  bottom: 5px;
  left: auto;
  right: auto;
}

.text {
  text-align: center;
}

.submainbox {
  margin-left: 30px;
  margin-right: 30px;
  height: 550px;
  overflow-y: auto;
}

.el-button {
  margin-top: 20px;
  margin-left: 20px;
}
</style>
